<template>
    <div>
        <Card>
            <i-form :model="formCustom"   :label-width="110"  inline>
                <Form-item label="当日疑似阳性" prop="negative">
                    <i-input  v-model="formCustom.negative" number></i-input>
                </Form-item>
                <Form-item label="当日疑似总数"   prop="negativeTotal">
                    <i-input  v-model="formCustom.negativeTotal" number></i-input>
                </Form-item>
                <Form-item label="密接当日阳性"  prop="contact">
                    <i-input v-model="formCustom.contact" number></i-input>
                </Form-item>
                <Form-item label="密接当日总数"  prop="contactTotal">
                    <i-input  v-model="formCustom.contactTotal" number></i-input>
                </Form-item>
            </i-form>
        </Card>

        <div class="submit-button">
            <i-button type="primary" @click="handleSubmit('formCustom')">添加</i-button>
        </div>

        <i-table  border :columns="columns2" :data="data4"></i-table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="100" :current="1" @on-change="changePage"></Page>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  // 核酸检测能力
  data () {
    return {
      formCustom: {
        negative: '',
        negativeTotal: '',
        contact: '',
        contactTotal: ''
      },
      ruleCustom: {
        negative: [
          { required: true, message: '当日疑似阳性必填', trigger: 'blur' }
        ],
        negativeTotal: [
          { required: true, message: '当日疑似总数必填', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '密接当日阳性必填', trigger: 'blur' }
        ],
        contactTotal: [
          { required: true, message: '密接当日总数必填', trigger: 'blur' }
        ]
      },
      columns2: [
        {
          title: '日期',
          key: 'date',
          width: 150
        },
        {
          title: '疑似阳性',
          key: 'negative'
        },
        {
          title: '疑似阳性总数',
          key: 'negativeTotal'
        },
        {
          title: '密接阳性',
          key: 'contact'
        },
        {
          title: '密接当日总数',
          key: 'contactTotal'
        }
      ],
      data4: [
        {
          date: '2019-08-12',
          negative: '124',
          negativeTotal: '20',
          contact: '205',
          contactTotal: '204'
        },
        {
          date: '2019-08-12',
          negative: '124',
          negativeTotal: '20',
          contact: '205',
          contactTotal: '204'
        }
      ]
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    changePage () {

    }
  }
}
</script>

<style scoped>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
</style>
